{%- assign section_identifier = '#shopify-section-' | append: section.id -%}
{%- style -%}
  {{ section_identifier }} .sec_heading {
    color: {{ section.settings.text_color_headline }};
  }
  .as-brand-milestone-wrap .brand-milestone-wrap h3.time {
      font-size: 32px;
      font-weight: 700;
  }
{%- endstyle -%}
<div class="brand-milestone-wrap position-relative">
  {% comment %} py-0 py-md-5 {% endcomment %}
  <div class="inner-wrap  as-inner-wrap d-flex flex-column  justify-content-between">
    <h2 class="sec_heading title mb-0 text-center letter-spacing-4" style="width:auto;">{{ section.settings.headline }}</h2>
    <div class="card-list-wrap d-none d-lg-block overflow-hidden">
      <div class="item-list w-100 d-flex align-items-start as-slide-list">
        {% for block in section.blocks %}
          {% liquid
            case block.settings.block_width
              when 'medium'
                assign card_class = 'medium-class'
              when 'large'
                assign card_class = 'large-class'
              else
                assign card_class = 'small-class'
            endcase
          %}
          <div class="item {{ card_class }} d-flex flex-column justify-content-between  as-course rounded-2">
            <div>
              <h3 data-time="500" class="time fw-bold text-black letter-spacing-2">{{ block.settings.time }}</h3>
              <div class="description overflow-hidden">
                {{ block.settings.description | replace: '<p>', "<p  data-time='800' class='mb-0 text-black letter-spacing-4'>" }}
              </div>
            </div>
            <div class="w-100">
              <picture>
                <img
                  class="w-100 object-fit-cover img rounded-2"
                  srcset="
                    {%- if block.settings.desktop_image.width >= 420 -%}{{ block.settings.desktop_image | img_url: '420x' }} 420w,{%- endif -%}
                    {%- if block.settings.desktop_image.width >= 720 -%}{{ block.settings.desktop_image | img_url: '720x' }} 720w,{%- endif -%}
                    {%- if block.settings.desktop_image.width >= 840 -%}{{ block.settings.desktop_image | img_url: '840x' }} 840w,{%- endif -%}
                    {%- if block.settings.desktop_image.width >= 900 -%}{{ block.settings.desktop_image | img_url: '900x' }} 900w,{%- endif -%}
                    {%- if block.settings.desktop_image.width >= 1440 -%}{{ block.settings.desktop_image | img_url: '1440x' }} 1440w,{%- endif -%}
                    {%- if block.settings.desktop_image.width >= 1880 -%}{{ block.settings.desktop_image | img_url: '1880x' }} 1880w,{%- endif -%}
                    {{ block.settings.desktop_image | img_url: 'master' }} {{ block.settings.desktop_image.width }}w
                  "
                  src="{{ block.settings.desktop_image }}"
                  alt="{{ block.settings.desktop_image.alt | escape }}"
                  loading="lazy"
                >
              </picture>
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
    <div class="d-block d-lg-none as-milestone-swiper milestone-swiper overflow-hidden">
      <div class="swiper-wrapper">
        {% for block in section.blocks %}
          <div class="item  swiper-slide h-auto">
            <div class="inner rounded-2 bg-white  h-100 d-flex flex-column justify-content-between">
              <div> 
                <h3 data-time="500" class="time fw-bold text-black letter-spacing-2">{{ block.settings.time }}</h3>
                <div class="description">
                  {{ block.settings.description | replace: '<p>', "<p data-time='800' class='mb-0 text-black letter-spacing-4'>" }}
                </div>
              </div>
              <div class="w-100 mt-5">
                <picture>
                  <img
                    class="w-100 object-fit-cover img rounded-2"
                    srcset="
                      {%- if block.settings.mobile_image.width >= 420 -%}{{ block.settings.mobile_image | img_url: '420x' }} 420w,{%- endif -%}
                      {%- if block.settings.mobile_image.width >= 720 -%}{{ block.settings.mobile_image | img_url: '720x' }} 720w,{%- endif -%}
                      {%- if block.settings.mobile_image.width >= 840 -%}{{ block.settings.mobile_image | img_url: '840x' }} 840w,{%- endif -%}
                      {%- if block.settings.mobile_image.width >= 900 -%}{{ block.settings.mobile_image | img_url: '900x' }} 900w,{%- endif -%}
                      {%- if block.settings.mobile_image.width >= 1440 -%}{{ block.settings.mobile_image | img_url: '1440x' }} 1440w,{%- endif -%}
                      {%- if block.settings.mobile_image.width >= 1880 -%}{{ block.settings.mobile_image | img_url: '1880x' }} 1880w,{%- endif -%}
                      {{ block.settings.mobile_image | img_url: 'master' }} {{ block.settings.mobile_image.width }}w
                    "
                    src="{{ block.settings.mobile_image }}"
                    alt="{{ block.settings.mobile_image.alt | escape }}"
                    loading="lazy"
                  >
                </picture>
              </div>
            </div>
          </div>
        {% endfor %}
      </div>
      <div class="pagination-wrap position-relative" style="margin-top:auto">
        <div class="swiper-pagination line-width-init as-line-animation" data-trigger = "1"></div>
      </div>
    </div>
    <div class="w-100 position-relative padding-x d-lg-block d-none" style="margin-top:auto;">
      <div class="position-relative line line-width-init as-line-animation  as-grayline" data-trigger = "1">
        <div class="online position-absolute as-online"></div>
        <div class="slide-btn as-slide-btn position-absolute left-0 cursor-pointer"></div>
      </div>
    </div>
  </div>
  <div class="as-inner-height d-lg-block d-none"></div>
</div>
{% schema %}
{
  "name": "Milestone",
  "tag": "section",
  "class": "as-brand-milestone-wrap",
  "settings": [
    {
      "type": "text",
      "id": "headline",
      "label": "Headline"
    },
    {
      "type": "header",
      "content": "Colors Settings"
    },
    {
      "type": "color",
      "id": "text_color_headline",
      "label": "Text Headline",
      "default": "#ffffff"
    }
  ],
  "blocks": [
    {
      "type": "content",
      "name": "CONTENT",
      "settings": [
        {
          "type": "header",
          "content": "CONTENT"
        },
        {
          "type": "text",
          "id": "time",
          "label": "Time"
        },
        {
          "type": "richtext",
          "id": "description",
          "label": "Description"
        },
        {
          "type": "header",
          "content": "IMAGE"
        },
        {
          "type": "image_picker",
          "id": "desktop_image",
          "label": "Desktop image"
        },
        {
          "type": "image_picker",
          "id": "mobile_image",
          "label": "Mobile image"
        },
        {
          "type": "select",
          "id": "block_width",
          "label": "Block width",
          "options": [
            {
              "value": "small",
              "label": "Small"
            },
            {
              "value": "medium",
              "label": "Medium"
            },
            {
              "value": "large",
              "label": "Large"
            }
          ],
          "default": "small"
        }
      ]
    }
  ]
}
{% endschema %}
